<template>
	<view class="error" v-if="visbole" @click="clickErrorRefresh">
		<image class="icon" :src="icon"></image>
		<text class="content">{{ text }}</text>
		<text class="operation">{{ content }}</text>
	</view>
</template>

<script>
export default {
	data() {
		return {
			visbole: false,
			text: '',
			content: '',
			icon: '',
			fail: function() {},
			success: function() {},
			complete: function() {}
		};
	},
	methods: {
		show: function(param = {}) {
			this.visbole = true;
			this.text = param.text ?? '';
			this.content = param.content ?? '';
			this.icon = param.icon ?? require('./error.png');

			this.fail = param.fail ?? function() {};
			this.success = param.success ?? function() {};
			this.complete = param.complete ?? function() {};
		},
		hide: function(param = {}) {
			this.visbole = false;
		},
		clickErrorRefresh: function() {
			let param = { click: 'panel' };
			if (this.success(param) == false) return;
			this.hide();
			this.complete(param);
		}
	}
};
</script>

<style lang="scss" scoped>
.error {
	background: #fff;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	position: fixed;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	/* white-space: nowrap; */
}
.error .icon {
	width: 116rpx;
	height: 140rpx;
	padding-bottom: 40rpx;
}
.error .content {
	font-size: 32rpx;
	line-height: 60rpx;
}
.error .operation {
	font-size: 26rpx;
	color: #999999;
	line-height: 60rpx;
	padding-bottom: 60rpx;
}
</style>
